<template>
  <div style="width: 400px;">
    <!--依赖于input，所以用v-show,不能用v-if-->
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" v-show="false"
           @change="handleClick">
    <div style="" class="excel-body" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"
         @click="handleUpload">
      <div class="uploadExcel">
        <i class="el-icon-upload icon_style"></i>
        <div class="info_style">
          将文件拖到此处，或 <span class="font_style">点击上传</span>
        </div>
      </div>
    </div>
    <div class="alert_style">仅支持上传 xlsx/xls文件，且不超过500kb
    </div>
    <el-table v-if="false" :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item"/>
    </el-table>
  </div>
</template>

<script>
  import XLSX from "xlsx";

  export default {
    name: "uploadExcel",
    props: {
      onSuccess: Function
    },
    data() {
      return {
        listTable: [],
        loading: false,
        tableData: [],
        tableHeader: []
      };
    },
    methods: {
      handleDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        if (this.loading) return;
        const files = e.dataTransfer.files;
        if (files.length !== 1) {
          this.$message.error("仅支持单个上传一个文件");
          return;
        }
        const rawFile = files[0]; // 获取文件信息
        if (!this.isExcel(rawFile)) { //是不是excel文件
          this.$message.error("仅支持上传 .xlsx, .xls, .csv 文件");
          return false;
        }
        this.upload(rawFile);
        e.stopPropagation();
        e.preventDefault();
      },
      handleDragover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
      },
      handleUpload() {
        console.log('点击上传')
        this.$refs["excel-upload-input"].click();//触发表单上传事件，跳出选择文件框
      },
      handleClick(e) {
        console.log(e);
        const files = e.target.files;
        const rawFile = files[0]; // only use files[0]
        if (!rawFile) return;
        this.upload(rawFile,e);
      },
      upload(rawFile,e) {
        // this.$refs["excel-upload-input"].value = null; // fix can't select the same excel
        console.log(rawFile)
        if (!this.beforeUpload) {
          this.readerData(rawFile);
          return;
        }
        const before = this.beforeUpload(rawFile); //判断文件上传大小
        if (before) {
          this.readerData(rawFile); //把excel转化成数组
          e.target.value = ''//每次上传完后要清空value，否则上传相同的文件，第二次会默认上传失败
        }
      },
      beforeUpload(file) {
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (isLt1M) {
          return true;
        }
        this.$message({
          message: "请不要上传大于1M的文件",
          type: "warning"
        });
        return false;
      },
      readerData(rawFile) {
        this.loading = true;
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsArrayBuffer(rawFile);
          //参数可以是 Blob 或者 File 对象异步结果将在onload 事件中体现
          reader.onload = e => {
            const data = e.target.result;
            console.log(data);
            const workbook = XLSX.read(data, { type: "array" });
            console.log("workbook", workbook);
            //看下图
            const firstSheetName = workbook.SheetNames[0];
            // console.log("firstSheetName",firstSheetName);// "SheetJS" 取出工作表名称
            const worksheet = workbook.Sheets[firstSheetName]; //取出工作表名称对应的表格数据
            const header = this.getHeaderRow(worksheet); //表头名
            // console.log("header",header);
            const results = XLSX.utils.sheet_to_json(worksheet);//输出数据，除去表头
            //{timestamp: "2017-01-01 07:37:20",title: "Mtiwxlj Cqcdg Hvbjijr Vgmeey Wwznq Ljjnkvbz",
            //type: "US",importance: 2,status: "draft"} results的其中一列数据
            this.$emit("getExcelList", results);
            this.tableData = results;
            this.tableHeader = header;
            this.loading = false;
            resolve();
          };
        });
      },
      getHeaderRow(sheet) {
        const headers = [];
        const range = XLSX.utils.decode_range(sheet["!ref"]); //!ref: "A1:E21"
        // console.log(range);
        // s: {c: 0, r: 0} 开始为A1
        // e: {c: 4, r: 20} 结束为 E21
        let C;
        const R = range.s.r;
        /* start in the first row */
        for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
          const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
          // console.log(cell); A1的对象的值
          /* find the cell in the first row */
          let hdr = "UNKNOWN " + C; // <-- replace with your desired default
          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
          // console.log(XLSX.utils.format_cell(cell));//每个头部名
          headers.push(hdr);
        }
        return headers;
      },
      isExcel(file) {
        return /\.(xlsx|xls|csv)$/.test(file.name);
      }

    }
  };
</script>

<style scoped>
  .excel-body {
    height: 200px;
    width: 360px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    outline: none;
  }

  .uploadExcel {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .icon_style {
    font-size: 67px;
    color: #c0c4cc;
    margin: 40px 0 16px;
    line-height: 50px;
  }

  .info_style {
    color: #606266;
    font-size: 14px;
    text-align: center;
  }

  .font_style {
    color: #409eff;
    font-style: normal;
  }

  .alert_style {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
    margin-left: 5px
  }
</style>
